// 路由的配置文件 组件和url的对应关系

// 引入需要管理的组件
// import Vcontent from '../components/Vcontent.vue'
// import Vside from '../components/Vside.vue'
// import HelloWorld from '../components/HelloWorld.vue'
// import NotFound from '../components/NotFound.vue'
// import SongList from '../components/SongList.vue'
// import Detail from '../components/Detail.vue'
// import Layout from '../components/Layout.vue'
// import Cart from '../components/Cart.vue'
// import Info from '../components/Info.vue'
// import Login from '../components/Login.vue'

// ===========
// 改造成懒加载的方式
const Vcontent = () => import('../components/Vcontent.vue')
const Vside = () => import('../components/Vside.vue')
const HelloWorld = () => import('../components/HelloWorld.vue')
const NotFound = () => import('../components/NotFound.vue')
const SongList = () => import('../components/SongList.vue')
const Detail = () => import('../components/Detail.vue')
const Layout = () => import('../components/Layout.vue')
const Cart = () => import('../components/Cart.vue')
const Info = () => import('../components/Info.vue')
const Login = () => import('../components/Login.vue')
const Store = () => import('../components/Store.vue')
const St2 = () => import('../components/St2.vue')

// 引入路由
import Vue from 'vue';
import VueRouter from 'vue-router';
// 使用中间件
Vue.use(VueRouter);

// 路由表：组件和url的对应关系
const routes = [
    { 
        path: '/index',
        component: HelloWorld,
        // 路由独享的守卫-前置
        beforeEnter(to, from, next) {
            console.log(11, to);
            console.log(22, from);
            next()
        },
        meta: {title: '首页'}
    },
    { path: '/side', component: Vside,meta: {title: 'side', isLogin: true} },
    { path: '/store', component: Store,meta: {title: 'vuex'} },
    { path: '/store2', component: St2,meta: {title: 'vuex2'} },
    { path: '/content', component: Vcontent,meta: {title: 'content', needLogin: false} },
    { path: '/song', component: SongList,meta: {title: '歌曲列表', job: 'family'} },
    { path: '/login', component: Login,meta: {title: 'login'} },
    { path: '/detail/:name', component: Detail,meta: {title: '详情'} },
    {
        path: '/layout',
        component: Layout,
        // 子路由，可以多级嵌套
        children: [
            // 如果地址前写了斜线，就需要写完整的路由 父+子路由
            { path: '/layout/info', component: Info },
            { path: 'cart', component: Cart }
        ]
    },
    // 处理404页面的第一种方式
    // {path: '*', component: NotFound}
    // ================
    // 处理404页面的第二种方式
    { path: '/404', component: NotFound },
    { path: '*', redirect: '/404' },

]

// 创建路由实例
const router = new VueRouter({
    // 路由表
    routes: routes,
    // 路由模式 默认是hash，可以改成history
    mode: 'history',
    scrollBehavior(to, from, savePosition) {
        if(savePosition) {
            return savePosition
        }else {
            return {
                x: 0, y: 100
            }
        }
    }

})
// 全局前置守卫-登陆校验
router.beforeEach((to, from, next) => {
    // 修改页面标题
    document.title = to.meta.title || 'vue';
    // 需求：每次跳转页面都要判断是否登陆。song、detail、layout这三个页面需要检验登陆
    if(localStorage.getItem('name')) {
        // 将执行权交给下一个中间件 让代码继续执行
        next();
    }else {
        // 没有登陆
        if(to.path === '/song' || to.path.includes('/detail') || to.path.includes('/layout')) {
            next('/login')
        }else {
            next()
        }
    }
})

// 暴露出去 方便main.js使用
export default router